Industrial is a responsive HTML Template created for Industry and Engineering Services. This is powerful HTML template with full of customization options and features.
Industrial is based on Bootstrap 1170px grid system. All files are clearly organised we believe it will be easy to use and edit them. The design is very clean, elegant and modern. Any one can customize this template as his wishes
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
• 1170 px bootstrap grid.
• Easy to customize.
• sass files included.
• Fully Responsive.
• Modern and unique design.
• index.html
• index-civil.html
• index-energy.html
• index-mining.html
• index-oil.html
• index-welding.html.html
• index-static.html
• about-us.html
• about-us-alter.html
• news.html
• news-details.html
• clients.html
• history.html
• contact.html
• investors.html
• solutions.html
• solutions-alter.html
• solutions-extend.html
• solution-single.html
• solution-single-alter.html
• solution-single-extend.html
• projects.html
• projects-alter.html
• project-single.html
• products.html
• products-alter.html
• product-single.html
• gallery.html
• faqs.html
• responsibility.html
• resources.html
• teams.html
• teams-alter.html
• testimonial.html
• typography.html
• error-404.html
• get-a-quote.html
Version 1.1
• carousel.html (v1.1)
• contact-extend.html (v1.1)
• pricing.html (v1.1)
• pricing-alter.html (v1.1)
• testimonial-alter.html (v1.1)
• projects-extend.html (v1.1)
Version 1.2
• index-simple.html (v1.2)
• index-fullscreen.html (v1.2)
• index-bitcoin.html (v1.2)
• index-onepage-bitcoin.html (v1.2)
• index-onepage-industry.html (v1.2)
• bitcoin.html (v1.2)
• bitcoin-pricing.html (v1.2)
• bitcoin-signup.html (v1.2)
• bitcoin-datacenter.html (v1.2)
• case-study-lists.html (v1.2)
• case-study-detials.html (v1.2)
• careers.html (v1.2)
Version 1.2.2
• index-construction.html (v1.2.2)
• megamenu.html (v1.2.2)
<body> <!-- Header --> <header class="site-header"> <div class="top-bar"> </div> <div class="navbar"> </div> <div class="banner-slider"> </div> </header> <!-- End Header --> <!-- Service --> <div class="section-services"> </div> <!-- End Service --> <!-- content --> <div class="section-about"> </div> <!-- End content --> <!-- CTA-Parallax --> <div class="cta-content"> </div> <!-- End Section --> <!-- Project Section --> <div class="section-projects"> </div> <!-- End projects --> <!-- Testimonials --> <div class="section-quotes"> </div> <!-- End quote --> <!-- Latest News --> <div class="section-news"> </div> <!-- End Section --> <!-- Client logo --> <div class="section-logos"> </div> <!-- End Section --> <!-- call-action --> <div class="call-action"> </div> <!-- call-action --> <!-- footer widget--> <div class="footer-widget"> </div> <!-- End footer widget --> <!-- Copyright --> <div class="copyright"> </div> <!-- End copyright --> </body>
All CSS are located in the "css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:
Third-Party Vendor
01. animate.css
02. bootstrap.min.css
03. font-awesome.min.css
04. magnific-popup.css
05. owl.carousel.css
---
Used Files
01. vendor.bundle.css
02. style.css
---
Pre-Built color preset (use only one stylesheet)
01. style-orange.css
02. style-bluelight.css
03. style-green.css
04. style-red.css
05. style-bitcoin.css (v1.2)
/**
Template Name: Industrial - HTML Template
Author: Softnio
Version: 1.0.0
Update: 08.29.2017
*/
/**
* Table of Contents
* 1.0 - Fonts
* 2.0 - Resets
* 2.1 - General
* 3.0 - Header/Navbar
* 4.0 - Banner/Slider
* 5.0 - Call-Action
* 6.0 - Page Content
* 7.0 - Forms
* 8.0 - Stats
* 9.0 - Testimonials
* 10.0 - Clients Logo
* 11.0 - Widgets
* 12.0 - Footer / Copyright
* 13.0 - Blog/News
* 14.0 - FAQs
* 15.0 - Feature Box
* 16.0 - Teams Member
* 17.0 - Gallery with Filter
* 18.0 - Products
* 19.0 - Responsive
* 20.0 - Version Wise
* 21.0 - Extra/Additional
*/
/* ===============================
1.0 FONTS
=============================== */
@font-face {
font-family: 'Roboto';
src: url("../fonts/roboto/roboto-regular-webfont.eot");
src: url("../fonts/roboto/roboto-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-regular-webfont.woff2") format("woff2"), url("../fonts/roboto/roboto-regular-webfont.woff") format("woff"), url("../fonts/roboto/roboto-regular-webfont.ttf") format("truetype");
font-weight: 400; }
@font-face {
font-family: 'Roboto';
src: url("../fonts/roboto/roboto-bold-webfont.eot");
src: url("../fonts/roboto/roboto-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-bold-webfont.woff2") format("woff2"), url("../fonts/roboto/roboto-bold-webfont.woff") format("woff"), url("../fonts/roboto/roboto-bold-webfont.ttf") format("truetype");
font-weight: 700; }
@font-face {
font-family: 'Roboto';
src: url("../fonts/roboto/roboto-light-webfont.eot");
src: url("../fonts/roboto/roboto-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-light-webfont.woff2") format("woff2"), url("../fonts/roboto/roboto-light-webfont.woff") format("woff"), url("../fonts/oroboto/roboto-light-webfont.ttf") format("truetype");
font-weight: 300; }
@font-face {
font-family: 'Poppins';
src: url("../fonts/poppins/poppins-light-webfont.eot");
src: url("../fonts/poppins/poppins-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-light-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-light-webfont.woff") format("woff"), url("../fonts/poppins/poppins-light-webfont.ttf") format("truetype");
font-weight: 300; }
@font-face {
font-family: 'Poppins';
src: url("../fonts/poppins/poppins-regular-webfont.eot");
src: url("../fonts/poppins/poppins-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-regular-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-regular-webfont.woff") format("woff"), url("../fonts/poppins/poppins-regular-webfont.ttf") format("truetype");
font-weight: 400; }
@font-face {
font-family: 'Poppins';
src: url("../fonts/poppins/poppins-semibold-webfont.eot");
src: url("../fonts/poppins/poppins-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-semibold-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-semibold-webfont.woff") format("woff"), url("../fonts/poppins/poppins-semibold-webfont.ttf") format("truetype");
font-weight: 600; }
@font-face {
font-family: 'Poppins';
src: url("../fonts/poppins/poppins-bold-webfont.eot");
src: url("../fonts/poppins/poppins-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-bold-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-bold-webfont.woff") format("woff"), url("../fonts/poppins/poppins-bold-webfont.ttf") format("truetype");
font-weight: 700; }
/* ===============================
2.0 Resets
=============================== */
body {
font-family: "Roboto", sans-serif;
color: #373638;
font-size: 16px;
line-height: 1.75;
font-weight: 400; }
html, body {
overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 {
font-family: "Poppins", sans-serif;
line-height: 1.25;
font-weight: 600; }
h1.color-secondary, h2.color-secondary, h3.color-secondary, h4.color-secondary, h5.color-secondary, h6.color-secondary {
color: #e83338; }
h1.color-primary, h2.color-primary, h3.color-primary, h4.color-primary, h5.color-primary, h6.color-primary {
color: #005aab; }
h1, .h1, .heading-lg, .heading-lg-lead {
font-size: 2.25em;
color: #005aab; }
h2, .h2 {
font-size: 1.875em;
color: #005aab; }
h3, .h3, h4, .h4, .heading-md, .heading-md-lead {
font-size: 1.5em;
font-weight: 600;
color: #6a686c; }
h4, .h4 {
font-size: 1.25em;
color: #6a686c; }
h5, .h5 {
font-size: 1.125em;
font-weight: 700;
color: #6a686c; }
h6, .h6, .heading-sm, .heading-sm-lead {
font-size: .875em;
color: #6a686c;
font-weight: 700; }
ul, ol {
padding: 0px;
margin: 0px; }
ul li, ol li {
list-style: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, table {
margin: 0 0 18px; }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, table:last-child {
margin-bottom: 0; }
/* ==========================================================================
2.1 General / Common
========================================================================== */
.content-section {
margin-top: 45px; }
.content-section:first-child {
margin-top: 0px; }
.content .list-style li {
position: relative;
padding-left: 18px;
margin-left: 0;
margin-bottom: 12px; }
/* ==========================================================================
3.0 Header/Navbar
========================================================================== */
.site-header {
position: relative; }
.site-header .navbar {
border-radius: 0;
border: 0 none;
min-width: 300px;
padding: 12px 0;
color: #5c5c5c;
background: #fff;
margin: 0; }
All javascript are located in the "js" folder of the template
Third-Party Vendor
01. bootstrap.js
02. filterizr.min.js
03. form.plugins.js
04. gmaps.js
05. jquery.min.js
06. magnific-popup.min.js
07. owl.carousel.min.js
08. parallaxie.js
---
Used Files
01. jquery.bundle.js
02. script.js
All javascript code are located in script.js file
;(function($){
'use strict';
// Sticky
var $is_sticky = $('.is-sticky');
if ($is_sticky.length > 0 ) {
var $win = $(window), $navm = $('#mainnav').offset();
$win.scroll(function(){
var $scroll = $win.scrollTop();
if ($win.width() > 991) {
if($scroll > $navm.top+4 ){
if(!$is_sticky.hasClass('has-fixed')) $is_sticky.addClass('has-fixed');
} else {
if($is_sticky.hasClass('has-fixed')) $is_sticky.removeClass('has-fixed');
}
} else {
if($is_sticky.hasClass('has-fixed')) $is_sticky.removeClass('has-fixed');
}
});
}
// Slider
var $slider = $('#slider');
if ($slider.length > 0 ) {
$slider.carousel({ interval:6000, pause: 'null' });
}
//Carousel
var $has_carousel = $('.has-carousel');
if ($has_carousel.length > 0 ) {
$has_carousel.each(function(){
var $self = $(this);
var c_item = ($self.data('items')) ? $self.data('items') : 4;
var c_item_t = (c_item >= 3) ? 3 : c_item;
var c_item_m = (c_item_t >= 2) ? 2 : c_item_t;
var c_delay =($self.data('delay')) ? $self.data('delay') : 6000;
var c_auto =($self.data('auto')) ? true : false;
var c_loop =($self.data('loop')) ? true : false;
var c_dots = ($self.data('dots')) ? true : false;
var c_navs = ($self.data('navs')) ? true : false;
$self.owlCarousel({
navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
items: c_item, loop: c_loop, nav: c_navs, dots: c_dots, margin: 30,
autoplay: c_auto, autoplayTimeout: c_delay, autoplaySpeed: 700,
responsive:{ 0:{ items:1 }, 480:{ items: c_item_m }, 768:{ items: c_item_t }, 1170:{ items: c_item } }
});
});
}
})(jQuery);
.
First open the php file located into form folder. Files are 'contact.php', 'quote-request.php'. On each file you will saw bellow code. Just update your sitename, your email and name. If you want to add multiple email then just duplicate the line '$emailTO[] = array...' and add another email
// Enter Your Sitename $sitename = 'your site'; // Enter your email addresses: @required $emailTO[] = array( 'email' => 'your mail', 'name' => 'your name' );
If you want to add BCC / CC email address then just enable below line and update same way as email too.
//$emailBCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' ); //$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );
In this template have 4 different pre-built stylesheet which is helps you to use different color on your site. So you just need to update stylesheet link from each html head section.
Example as bellow.
<link rel="stylesheet" type="text/css" href="css/style.css"> to <link rel="stylesheet" type="text/css" href="css/style-red.css">
This template support 3 different header style. So you can control this just change class name [header-s1|s2|s3]. Example as bellow.
Style 1
<header class="site-header header-s1">
Style 2
<header class="site-header header-s2">
Style 3
<header class="site-header header-s3">
This template support sticky header. So you can control this just add or remove a class name [is-sticky] from header class. Example as bellow.
Support sticky
<header class="site-header header-s1 is-sticky">
No sticky
<header class="site-header header-s1">
This template support transparent header. So you can control this just add or remove a class name [is-transparent] from header class. Example as bellow.
Make Transparent
<header class="site-header header-s1 is-transparent">
Addtionally transparent header only support with header style 1 [header-s1]
Parallaxie :- https://github.com/TheUltrasoft/Parallaxie
GMaps :-https://hpneo.github.io/gmaps/
Preloader :- https://www.niklausgerber.com/projects/preloadme-a-lightweight-jquery-website-preloader/
Magnific-Popup :- http://dimsemenov.com/plugins/magnific-popup/
Filterizr :- http://yiotis.net/filterizr/
jQuery Form :- http://malsup.com/jquery/form/
jQuery Validation :- http://jqueryvalidation.org/
PHPMailer :- https://github.com/PHPMailer/PHPMailer/
Pexel :- https://www.pexels.com/
Unsplash :- https://unsplash.com/
Pixabay :- https://pixabay.com/
DepositPhotos :- https://depositphotos.com/
IMPORTANT: You must aware, upgrade process overwrite your custom code if you have already. As always must keep backup before any process.
Megamenu Feature Added for Navigation.
New File Added and Update code:
+ index-construction.html
+ megamenu.html
+ reCaptcha added
+ list style added .quad (square) and .tick (checkmark)
!+ stylesheet updated regarding megamenu and list style.
For updating your template to new version, you need to update style sheet (style.css).
Fixed the bug of new Navigation.
New Update code:
!+ script.js updated regarding jquery minor error.
!+ stylesheet updated regarding hover issues on touch supported laptop.
For updating your template to new version, you need to update javascript (script.js) and style sheet (style.css).
Add new Industry (Bitcoin) template & also more home page style, some other style as well as improvment typography into template.
New File Added and Update code:
+ Important Update: Mobile Navigation Style
+ index-simple.html
+ index-fullscreen.html
+ index-bitcoin.html
+ index-onepage-bitcoin.html
+ index-onepage-industry.html
+ bitcoin.html
+ bitcoin-datacenter.html
+ bitcoin-pricing.html
+ bitcoin-signpup.html
+ careers.html
+ case-study-lists.html
+ case-study-detials.html
! *.html - add new page link in navigation.
@ javascript updated regarding onepage template and modern mobile navigation.
@ stylesheet (all) update regarding bitcoin template as well other feature.
For updating your template to new version, you need to update javascript (jquery.bundle.js and script.js) and style sheet (vendor.bundle.css and style.css).
New feature pricing table added into template
New File Added and Update code:
+ pricing.html
+ pricing-alter.html
+ carousel.html
+ contact-extend.html
+ projects-extend.html
+ testimonial-alter.html
+ image/arrow-{next/prev}-{w/g}.png
! *.html - add new page link in navigation.
@ stylesheet (all) update regarding pricing table.
For updating your template to new version, you need to update javascript (script.js) and main style sheet (style.css).
Initial Released Template
Caution:
If you have order version, you can upgrade to newer version. Must aware upgrade process overwrite your custom code if you have already. So must keep backup before any process.